import { useEffect, useState } from 'react'

import './App.css'
import axios from 'axios'
import { Tabs } from 'antd';
import xx from './img/xx.png'
import xh from './img/xh.png'
const App: React.FC = () => {

  const [list, setList] = useState([])
  const xuanRan = async () => {
    const res = await axios.get('/api/codelist')
    console.log(res)
    const { data } = res.data
    setList(data)
  }
  useEffect(() => {
    xuanRan()
  }, [])
  const onChange = (key: string) => {
    console.log(key);
  };
  return (
    <div className='hh'>
    
      <Tabs defaultActiveKey="1" onChange={onChange} >
        {

          list.map((item, index) => (
            <Tabs.TabPane tab={item.label} key={index}>
                 <img src={xx} alt="" style={{width:'150px'}} />
              {
                item.children.map((it, y) => (
                  <p key={y}>
                    <span>{y < 3 ? y + 1 : ''}</span>  
                   
                    {it.word}
                    <img src={xh} alt="" style={{height:'100px'}} />
                 
                  </p>
                 ))
               }
            </Tabs.TabPane>
          ))
        }
      </Tabs>

    </div>
  )
}

export default App
